<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row style="text-align: right">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline">
          <el-form-item label="账号">
            <el-input
              size="small"
              v-model="formInline.user"
              placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small">
              查询
            </el-button>
            <el-button size="small">重置</el-button>
            <el-button type="text">
              展开
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        border
        :data="productListData"
        stripe
        size="small"
        v-loading="loading"
        style="width: 100%; margin-bottom: 3px">
        <el-table-column
          type="selection"
          width="55"></el-table-column>
        <el-table-column
          prop="product_name"
          label="产品名称"
          width="180"></el-table-column>
        <el-table-column
          prop="product_no"
          label="编号"
          width="180"></el-table-column>
        <el-table-column
          prop="category.category_name"
          label="类别"
          min-width="180"></el-table-column>
          <el-table-column
          prop="category.group_name"
          label="分组"
          min-width="180"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next, jumper, slot"
        :total="total">
          <span style="line-height:28px;margin-left:5px;">
            <el-button type="text" @click="refreshAction" :loading="loading">{{ loading ? '': '刷新'}}</el-button>
          </span>
        </el-pagination>
    </el-card>
  </div>
</template>
<script>
  import { getList } from '@/api/product';
  export default {
    name: 'index',
    data() {
      return {
        productListData: [],
        formInline: {},
        checkedUser: null,
        pageSize: 10,
        currentPage: 1,
        loading: false,
        total: 0,
      };
    },
    created() {
      this.getListData();
    },
    methods: {
      getListData() {
        this.loading = true;
        getList({ page: this.currentPage, limit: this.pageSize, where: {} }).then(res => {
          this.$set(this, 'productListData', res.data.data);
          this.$set(this, 'total', res.data.total);
          this.loading = false;
        });
      },
      addUser() {
        this.showUserDialog(0);
      },
      editUserAction(row) {
        this.showUserDialog(row.id);
      },
      showUserDialog(userId) {
        this.$createDialog({
          title: '编辑用户',
          component: Add,
          props: {
            userId: userId,
          },
          buttons: [{ text: '确定', callback: 'handleSubmit', name: 'submit' }],
        });
      },
      refreshAction() {
        this.$set(this, 'currentPage', 1);
        this.$set(this, 'pageSize', 10);
        this.getListData();
      },
      handleSizeChange(val) {
        this.$set(this, 'currentPage', 1);
        this.$set(this, 'pageSize', val);
        this.getListData();
      },
      handleCurrentChange(val) {
        this.$set(this, 'currentPage', val);
        this.getListData();
      },
      rechargeUserAction(row) {},
      setUserProductAction(row) {},
      resetUserPasswordAction(row){},
    },
  };
</script>
